<template>
	<!--推广页面 -->
	<view class="content display  displayColumn width-100">
		<u-navbar @rightClick="rightClick" :autoBack="true" bgColor="transparent">
			<template slot="left">
				<uni-icons type="left" color="#ffffff" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title" style="color: #fff;">我的推广</text>
			</template>
		</u-navbar>
		<view class="content_top display  width-100 displayColumn ">
			<view class="avator display  width-100 M-T104" style="margin-top: 200rpx;justify-content: space-between;">
				<view class="avator_one display   all_item height_100 displaycenter_aliem M-L30">
					<img class="img" src="@/static/img/car-manage.png" alt="" />
					<view class="avator_txt display  displayColumn  displaycenter_jus  height_100 " style="margin-right: 40rpx;">
						<span class="fontSize font_comm M-L24">{{userInfo.user.nickName}}</span>
						<span class="fontSize font_comm  M-L24" style="margin-top: 12rpx;">{{userInfo.user.userId}}</span>
					</view>
				</view>
				<!-- 邀请朋友 -->
				<view class="yaoqingfrined display  displaycenter_aliem  " >
					<view class="yaoqingfrined_one display  all_item "  @click="invitefriend">
						<span class="fontSize font_comm">邀请好友</span>
					</view>
				</view>
			</view>
			<!-- 我的推广 -->
			<view class="mypopular display  width-100 all_item M-T24">
				<view class="mypopular_all display displayColumn ">
					<view class="mypopular_all_one display  width-100 displaycenter_aliem M-T24">
						<span class="fontSize font_comm txt1 M-L22">我的推广</span>
						<span class="fontSize font_comm txt2 M-R26" @click="todetails">明细<uni-icons type="right"
								color="#72778A" size="12"></uni-icons></span>
					</view>
					<view class="mypopular_all_two display   width-100 M-T30">
						<view class="fn_two display displayColumn " @click="todetails">
							<span class="fontSize font_comm"
								style="font-size: 44rpx;"><span>￥</span>{{info.cash||'0'}}</span>
							<span class="fontSize font_comm">可提现金额</span>
						</view>
						<view class="fn_two display displayColumn " @click="promotedOrders">
							<span class="fontSize font_comm"
								style="font-size: 44rpx;"><span>￥</span>{{info.totalTodayAwaitCash ||'0'}}</span>
							<span class="fontSize font_comm">今日收益金额</span>
						</view>
						<view class="fn_two display displayColumn " @click="promotedOrders">
							<span class="fontSize font_comm"
								style="font-size: 44rpx;"><span>￥</span>{{info.totalCash ||'0'}}</span>
							<span class="fontSize font_comm">累计收益金额</span>
						</view>
					</view>
					<view class="mypopular_all_three display  width-100 displaycenter_aliem"
						style="padding-bottom: 24rpx;">
						<!-- <span class="fontSize font_comm M-R26">含待结算￥120</span> -->
					</view>
				</view>
			</view>
			<!-- 新增用户 -->
			<view class="mypopular display  width-100 all_item M-T24">
				<view class="mypopular_all display displayColumn ">
					<view class="mypopular_all_two display   width-100 M-T30" style="padding-bottom:30rpx ;">
						<view class="fn_two display displayColumn " @click="promotedOrders">
							<span class="fontSize font_comm"
								style="font-size: 44rpx;">{{info.todayOrderAmount||'0'}}</span>
							<span class="fontSize font_comm">今日新增订单</span>
						</view>
						<view class="fn_two display displayColumn ">
							<span class="fontSize font_comm"
								style="font-size: 44rpx;"><span>￥</span>{{info.totalTodayAwaitCash||'0.00'}}</span>
							<span class="fontSize font_comm">今日收益金额</span>
						</view>
						<view class="fn_two display displayColumn " @click="mykehu">
							<span class="fontSize font_comm"
								style="font-size: 44rpx;">{{info.todayIncInvite||'0'}}</span>
							<span class="fontSize font_comm">今日新增客户</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 第三行 -->
			<view class="mypopular display  width-100 all_item M-T24">
				<view class="mypopular_all display displayColumn ">
					<view class="mypopular_all_two display   width-100 M-T30" style="padding-bottom:30rpx ;">
						<view class="fn_two display displayColumn " @click="mykehu">
							<span class="fontSize font_comm"
								style="font-size: 44rpx; color: #212121;">{{info.totalInviteUseful}}</span>
							<span class="fontSize font_comm">累计客户</span>
						</view>
						<view class="fn_two display displayColumn " @click="numkehu">
							<span class="fontSize font_comm"
								style="font-size: 44rpx; color: #212121;">{{info.totalInvite}}</span>
							<span class="fontSize font_comm">累计邀请</span>
						</view>
						<view class="fn_two display displayColumn " @click="promotedOrders">
							<span class="fontSize font_comm"
								style="font-size: 44rpx; color: #212121;">{{info.totalInviteOrders}}</span>
							<span class="fontSize font_comm">累计推广订单</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content_bottom display  width-100 displayColumn">
			<view class="fn_one display displaycenter_aliem  width-100 M-T36">
				<span class="fontSize font_comm txt_shuju M-L30">数据概览</span>
				<view
					:class="{fn_one_item:selectIndex!=index ,fn_one_item1:selectIndex==index, display:true, all_item:true, 'M-L30':true}"
					v-for="(item,index) in timeduan" :key="index" @click="changeIndex(index)">
					<span class="fontSize font_comm">{{item}}</span>
				</view>
			</view>
			<!-- 折线图 -->
			<view class="zhexian display  width-100 all_item M-T20">
				<view class="zhexian_box display " style="padding: 15rpx;overflow: hidden;">
					<qiun-data-charts type="line" canvasId="scrolllineid"
						:opts="{enableScroll:false,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}"
						:chartData="chartsDataLine4" :ontouch="true" :canvas2d="true" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import demodata from '@/packageC/componets/demodata.json';
	import qiunDataCharts from '@/packageC/componets/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				chartsDataLine4: {},
				timeduan: ['近七天', '近30天', '近90天'],
				selectIndex: 0,
				info: {},
				shuju: {
					categories: [],
					series: []
				}
			}
		},
		onReady() {
			//模拟从服务器获取数据
			this.getServerData()
		},
		onLoad() {
			// 获取信息列表
			this.getinfoList();
		},
		computed: {
			userInfo() {
				return this.$store.state.user;
			},
		},
		methods: {
			getinfoList() {
				this.$req.get('/xcx/userExtendWallet/getExtendWalletInfo').then(res => {
					this.info = res.data.data;
				})
			},
			changeIndex(index) {
				this.selectIndex = index;
				this.getServerData()
			},
			// 邀请朋友
			invitefriend() {
				this.$tab.navigateTo('/packageC/Invitefriends/Invitefriends')
			},
			// 邀请名单
			numkehu() {
				this.$tab.navigateTo('/packageC/cuminvate/cuminvate')
			},
			// 我的客户
			mykehu() {
				this.$tab.navigateTo('/packageC/myclient/myclient')
			},
			// 推广订单
			promotedOrders() {
				this.$tab.navigateTo('/packageC/promotedOrders/promotedOrders')
			},
			// 跳转明细页面
			todetails() {
				this.$tab.navigateTo('/packageC/details?cash=' + this.info.cash)
			},
			getServerData() {
				this.shuju.series = []
				this.shuju.categories = []
				let limit = 7
				limit = this.selectIndex == 0 ? 7 : this.selectIndex == 1 ? 30 : 90
				this.$req.get(`/xcx/userExtendOrder/getChartsInfo/${limit}`).then(res => {
					console.log(res)
					let orderNums = []; //订单数
					let countCommission = []; //收益佣金金额
					let customers = []; //新增客户数

					res.data.data.forEach(item => {
						orderNums.push(item.orderNums)
						countCommission.push(Number(item.countCommission))
						customers.push(item.customers)
					})
					console.log(orderNums, countCommission, customers)
					customers.forEach((item, index) => {
						this.shuju.categories.push(index)
					})
					this.shuju.series.push({
						name: '订单',
						data: orderNums
					})
					this.shuju.series.push({
						name: '金额',
						data: countCommission
					})
					this.shuju.series.push({
						name: '客户',
						data: customers
					})
				})
				this.chartsDataLine4 = this.shuju
				//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
				//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
				/*
				"Line": {
					"categories": ["0", "1", "2", "3", "4", "5","7", "8"],
					"series": [{
						"name": "订单",
						"data": [35, 8, 25, 37, 4, 20,20,20]
					}, {
						"name": "金额",
						"data": [70, 40, 65, 100, 44, 68,20,20]
					}, {
						"name": "客户",
						"data": [100, 80, 95, 150, 112, 132,20,20]
					}]
				},
				*/
				// this.chartsDataLine4 = JSON.parse(JSON.stringify(demodata.Line))


			}
		}
	}
</script>


<style scoped lang="scss">
	.content_top {
		width: 750rpx;
		min-height: 702rpx;
		background: linear-gradient(180deg, #2373CA 0%, #F4F5FA 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

	}

	.content_bottom {
		width: 100%;
		height: 800rpx;
		background: #F4F5FA;

		.zhexian_box {
			width: 690rpx;
			height: 396rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}

		.fn_one {
			justify-content: flex-start;

			.txt_shuju {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
			}

			.fn_one_item {
				width: 94rpx;
				height: 42rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				span {
					font-weight: 400;
					font-size: 24rpx;
					color: #72778A;
				}
			}

			.fn_one_item1 {
				width: 94rpx;
				height: 42rpx;
				background: #126BC9;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				span {
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.avator {
		justify-content: space-between;
		.avator_txt {
			height: 100rpx;
			align-items: flex-start;

			:nth-child(1) {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.yaoqingfrined {

		justify-content: flex-end;
		.yaoqingfrined_one {
			
			width: 150rpx;
			height: 54rpx;
			background: #00DCA9;
			border-radius: 27rpx 0rpx 0rpx 27rpx;

			span {
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	// 我的推广
	.mypopular {
		.mypopular_all {
			width: 690rpx;
			// height: 266rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}
	}

	.mypopular_all_one {
		justify-content: space-between;

		.txt1 {
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.txt2 {
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A;
		}
	}

	.mypopular_all_two {
		justify-content: space-between;

		.fn_two {
			flex: 1;

			:nth-child(1) {
				font-weight: 600;
				font-size: 24rpx;
				color: #FF672D;
			}

			:nth-child(2) {
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #212121;
			}
		}
	}

	.mypopular_all_three {
		justify-content: flex-end;
		margin-top: 4rpx;

		span {
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A;
		}
	}
</style>